<template>
 <div>
     <div class="recommend-title">周末去哪儿...</div>
     <ul>
         <li class="item border-bottom" v-for="item in weekendList" :key="item.id">
              <div class="item-img-wrapper"> 
                <img :src="item.imgUrl" alt="" class="item-img">
              </div>
             <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
               
            </div>
         </li>
     </ul>
 </div>
</template>

<script>
 export default {
     props:{
         weekendList:Array
     },
   data () {
     return {
        recommemdList:[
            {
                id:"0001",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0002",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0003",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0004",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
        ]
     }
   },
   components: {

   }
 }
</script>

<style lang="stylus" scoped>
@import '~style/mixins.styl'
.recommend-title{
    line-height: 30px;
    background: skyblue;
    text-indent: 11px;
    margin-top: 11px;
}
ul,p{
    margin: 0;
    padding: 0;
  
}
.item-img-wrapper{
    overflow hidden
    height 0
    padding-bottom 33.9%
}
 img{
     width: 100%;

 }

 .item-title{
     line-height: 20px;
     font-size: 14px;
      ellipsis()
 }
  .item-desc{
     line-height: 18px;
     font-size: 12px;
     color: darkgrey
      ellipsis()
 }
</style>
